<!--
 * @Author: zywu 1061096367@qq.com
 * @Date: 2022-05-19 15:24:46
 * @LastEditors: zywu
 * @LastEditTime: 2022-07-19 11:06:30
 * @Description: 验证成功
-->
<template>
  <div class="device-verify-success">
    <div class="e-nav-bar">
      <div class="e-nav-bar__title e-flex-y-center e-flex-between e-pt-10">
        <div class="e-f-24 e-bold">验证结果</div>
      </div>
    </div>
    <div style="height:80px;"></div>
    <div class="e-p-15">
      <div class="e-flex-column e-flex-center e-flex-items-center">
        <img v-if="typeObj.id" class="device-verify-success-icon" :src="icon.url" :style="icon.style" />
        <div v-if="typeObj.pid!=110" class="e-color-success e-f-18 e-bold e-mt-10">{{title||'验证成功'}}</div>
        <van-divider class="e-mt-30" style="width:100%;border-color:#E1E1E1;" />
        <van-cell-group style="width:100%;" :border="false">
          <van-cell v-if="remark" :value="'备注：'+remark" />
          <!-- DTU -->
          <template v-if="isDTU">
            <van-cell title="最新数据上传时间：" title-class="e-color-333" :value="obj.createTime" value-class="e-color-primary" />
            <van-cell title="描述：" :value="obj.descs" title-class="e-color-333" value-class="e-color-primary" />
            <van-cell title="数据上传内容：" title-class="e-color-333">
              <div class="e-color-primary" :class="{'ell2':!showMessageData}">{{obj.messageData}}</div>
              <div class="e-flex-x-center e-mt-5">
                <div class="e-p-5">
                  <van-icon name="arrow-down" @click="showMessageData=!showMessageData" />
                </div>
              </div>
            </van-cell>
          </template>
          <!-- 温湿度/电气火灾 -->
          <template v-else-if="typeObj.pid==60||typeObj.pid==70">
            <van-cell title="数据更新时间：" title-class="e-color-333" :value="obj.createTime" value-class="e-color-primary" />
            <van-cell title="物联设备名称：" :value="obj.name" title-class="e-color-333" value-class="e-color-primary" />
            <van-cell
              v-for="n in propList"
              :key="n"
              :title="n.split(':')[0]"
              :value="n.split(':')[1]"
              title-class="e-color-333"
              value-class="e-color-primary"
            />
          </template>
          <!-- 可燃气体/水浸 -->
          <template v-else-if="typeObj.pid==50||typeObj.pid==80">
            <van-cell title="数据更新时间：" title-class="e-color-333" :value="obj.upLoadTime" value-class="e-color-primary" />
            <van-cell title="物联设备名称：" :value="obj.name" title-class="e-color-333" value-class="e-color-primary" />
            <van-cell title="状态：" value="报警" title-class="e-color-333" value-class="e-color-danger" />
          </template>
          <!-- 物联设备 -->
          <template v-else>
            <van-cell title="数据更新时间：" title-class="e-color-333" :value="obj.time" value-class="e-color-primary" />
            <van-cell title="物联设备名称：" :value="obj.name" title-class="e-color-333" value-class="e-color-primary" />
            <van-cell
              v-for="n in obj.dataJson"
              :key="n.dataTypeId"
              :title="`${n.dataName}${n.analogUnits?('（'+n.analogUnits+'）'):''}：`"
              :value="n.analogValue"
              title-class="e-color-333"
              value-class="e-color-primary"
            />
          </template>
        </van-cell-group>
      </div>
    </div>
    <div style="height:80px;"></div>
    <div class="e-fixed-b e-bg-white e-flex-y-center e-flex-between e-p-15">
      <van-button class="e-flex-grow van-button--theme" size="large" @click="exit">完成</van-button>
    </div>
  </div>
</template>

<script>
import api from '@/api/apiConfig'
let icon = {
  url: require('@/assets/img/addDevice/verify-success.png'),
  style: {
    width: '127px',
    height: '127px',
  },
}
export default {
  components: {},

  data() {
    return {
      title: '',
      icon: {},
      obj: {
        dataJson: [],
      },
      typeObj: {},
      isDTU: false,
      remark: '',
      showMessageData: false,
    }
  },

  computed: {
    propList() {
      return this.obj.descs ? this.obj.descs.split(',') : []
    },
  },

  created() {
    this.isDTU = this.$route.params.typeObj.pid == 110
    this.getConfig()
    this.obj = this.$route.params.deviceData || {
      dataJson: [],
    }
    // this.obj.descs='温度1(℃):29.3,温度2(℃):28.7,温度3(℃):28.2,温度4(℃):,A相电流(A):0.0,B相电流(A):0.0,C相电流(A):0.0,A相电压(V):0.0,B相电压(V):0.0,C相电压(V):0.0,剩余电流(mA):0.0'
    // this.obj.descs='信号强度(dbm):168.0,电池电量(%):95.0,温度(℃):27.4,湿度(RH):49.7'
  },

  mounted() {},

  methods: {
    getConfig() {
      this.typeObj = this.$route.params.typeObj
      let { id = 1, pid = 10 } = this.$route.params.typeObj
      api
        .getJSON({
          url:
            `/ilink-app-h5-zd/static/addDevice/tip/${pid}-${id}.json?` +
            new Date().getTime(),
          method: 'get',
        })
        .then(({ data }) => {
          if (data.success) {
            this.title = data.success.title || ''
            this.icon = data.success.icon
              ? {
                  url: `/ilink-app-h5-zd/static/addDevice/image/${pid}-${id}-verify-success.png`,
                  style: data.success.icon.style,
                }
              : icon
            this.remark = data.success.remark
          } else {
            this.icon = icon
          }
        })
    },
    exit() {
      this.$router.replace({
        name: 'AddDevice',
      })
    },
  },
}
</script>